<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>index</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/comon0.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<link rel="stylesheet" type="text/css" href="./comon.css">
</head>
<script>
	$(window).load(function () {
		$(".loading").fadeOut()
	})

	/****/
	$(document).ready(function () {
		var whei = $(window).width()
		$("html").css({
			fontSize: whei / 20
		})
		$(window).resize(function () {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 20
			})
		});
	});
</script>

<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/echarts.js"></script>
<style>
	.start-span::after {
		content: "...";
		/* 创建省略号内容 */
		position: absolute;
		right: 0;
		bottom: 0;
		color: white;
		/* 省略号颜色 */
		background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>

<!-- 2. 引入样式 -->
<link rel="stylesheet" href="js/elementIndex.css">

<body>
	<div class="loading">
		<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
	</div>

	<!-- <tr>
		<td>院长端（适配竖屏版）</td>
		<td><a target="_blank" href="http://172.16.240.73:8080/oriot/yuanzhang/">院长端（适配竖屏版）url</a>
		</td>
	</tr> -->


	<div class="mainbox" id="app">
		<ul class="clearfix">
			<li class="top1">
				<div v-if="hospitalSwitch !== '005'">
					<div class="head-span">
						<div style="float: left;width: 34%;margin-top: 3%;margin-left: 4%;">
							<img src="images/logo2.png" class="image_logo" style="">
						</div>
						<div
							style="width: 0.4%;height: 40%;background-color: #FFFFFF;float: left;opacity: 0.2;margin-top: 4%;margin-left: 5%;">
						</div>
						<div style="float: left;width: 47%;">
							<span class="logo-span" @click="playAudio">当日任务清单</span>
						</div>
					</div>

				</div>

				<div v-if="hospitalSwitch == '005'">
					<div class="head-span">
						<div style="float: left;width: 34%;margin-top: 3%;margin-left: 4%;">
							<img src="images/logo2.png" class="image_logoNewHos" style="">
							<span class="text-y0LogoHos">|</span>
							<!-- <img class="image_hosLogo" referrerpolicy="no-referrer" src="images/logoJST.png" /> -->
						</div>
						<div
							style="width: 0.4%;height: 40%;background-color: #FFFFFF;float: left;opacity: 0.2;margin-top: 4%;margin-left: 5%;">
						</div>
						<div style="float: left;width: 47%;">
							<span class="logo-spanLogo" @click="playAudio">当日任务清单</span>
						</div>
					</div>

				</div>



				<div class="head-span" style="">


				</div>
				<div class="head-span">

					<div class="taskCount-div" style="height: 55%;width: 30%;float: left;position: relative;top:20%">
					</div>
					<div style="height: 55%;width: 30%;position: relative;top:-40%">
						<div style="float: left;width: 20%;margin-top: 10%;margin-left: 2%;">
							<img src="images/taskCount.png" class="image_taskCount">
						</div>
						<div style="float: left;width: 75%;height: 100%;">
							<span class="taskCount-sapn">{{finishTotal}}个已完成</span>
						</div>
					</div>
					<div style="height: 70%;width: 65%;float: left;position: relative;top:-55%;left: 9%;">
						<div style="width: 45%;height: 100%; float: left;">
							<span class="time-span">{{time}}</span>
						</div>
						<div
							style="width: 0.5%;height: 80%;background-color: #FFFFFF;float: left;opacity: 0.2;margin-top: 6%;margin-left: 2%;">
						</div>
						<div
							style="width: 45%;height: 100%;text-align: left;float: left;margin-left: 6%;margin-top: 2%;">
							<div style="width: 100%;height: 48%;">
								<span class="time-span-right">{{date}}</span>
							</div>
							<div style="width: 100%;height: 48%;margin-top: 1%;">
								<span class="time-span-right">{{week}}</span>
							</div>
						</div>
					</div>

				</div>

			</li>
			<!-- 左 -->
			<li class="li1">
				<!-- 左上 -->
				<div class="box1" style="height: 9.9rem;padding:0.3rem 0.2rem 0.1rem 0.2rem" v-if="switchPage === 0">
					<div style="width: 100%;height: 5%;padding:0.05rem 0;">
						<div style="width: 33.3%;height: 100%;float: left;">
						</div>
						<div style="width: 33.3%;height: 100%;float: left;">
							<div style="width: 60%;position: relative;float: left;text-align: right;">
								<img src="images/runOrder.png" class="image_taskrun">
							</div>
							<div style="width: 40%;position: relative;float: left;text-align: left;">
								<span class="runCount-sapn">（{{runTotal}}个）</span>
							</div>
						</div>
						<div v-if="runTotal>0" style="width: 33.3%;height: 100%;float: left;text-align: right;">
							<span class="task-left-right-span">转运{{runYCount}}个/术中{{runXCount}}个</span>
						</div>

					</div>
					<div v-if="runTotal==0" style="width: 100%;height: 89%;position: relative;">
						<div style="width: 3.5rem;height:3.5rem;position: absolute;left:5.2rem;top:1.7rem;">
							<img src="images/noOrder.png" class="noOrder-img">
						</div>
						<div
							style="width: 4rem;height:1rem;position: absolute;left:4.95rem;top:5.4rem;text-align: center;">
							<span
								style="font-family: PingFangSC, PingFang SC;font-weight: 400;color: #94989E;font-size: 0.25rem;letter-spacing: 0.02rem;">暂无进行中的任务</span>
						</div>
					</div>

					<div v-if="runTotal>0"
						style="width: 100%;height: 89%;display: flex;justify-content: start;flex-wrap: wrap;margin: 0 auto;align-content: flex-start;">
						<div v-for="(site,index) in taskRunList"
							style="width: 2.7rem;height: 2.55rem;margin-left: 0.18rem;margin-top: 0.23rem;">
							<div
								style="width: 100%;position: relative;height: 0.6rem;text-align: center;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom: none;background-color: #06B2B5;">

								<div class="task-name" v-text="site.taskName" style="color:#fff">
									送病人
								</div>
							</div>

							<div
								style="border:#06B2B5 solid 1px;background-color: #282C38;width: 100%;height: 1.9rem;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top: none;">
								<!-- 纵向任务显示 -->
								<div v-if="site.typeNo=='2'" style="width: 100%;height: 75%;padding:0 0.15rem;">
									<div style="width: 100%;height: 35%;">

										<div class='marquee'>
											<div
												style="width:45%;height:100%;float:left;text-align: center;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
												<div class="startY-span">
													<span
														v-bind:class="[site.startingPoint.length>4?'marquee-span': '']"
														v-text="site.startingPoint" class="startY"
														:style="[{'color': statusColor(site.typeNo,site.stateNo)}]">OR10</span>
												</div>

											</div>

											<div style="width:10%;height:100%;float:left;">
												<div style="width: 0.2rem;height: 0.02rem;margin-top:0.2rem;background-color: #fff;"
													:style="[{'backgroundColor': statusColor(site.typeNo,site.stateNo)}]">
												</div>
											</div>

											<!-- [site.endingPoint.length>4?'marquee-span': 'startY-span'] -->
											<div
												style="width:45%;height:100%;float:left;text-align: center;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
												<div class="startY-span">
													<span v-bind:class="[site.endingPoint.length>4?'marquee-span': '']"
														v-text="site.endingPoint" class="startY"
														:style="[{'color': statusColor(site.typeNo,site.stateNo)}]">OR10</span>
												</div>
											</div>
										</div>

									</div>
									<div style="width: 100%;height: 35%;">
										<div
											style="width:50%;height:100%;float:left;text-align: left;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
											<span v-text="patientText(site.patientName)" class="infoY-span">患者姓名</span>
										</div>
										<div
											style="width:50%;height:100%;float:left;text-align: right;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
											<span v-text="site.inpatientNumber" class="infoY-span">住院号</span>
										</div>

									</div>
									<div style="width: 100%;height: 30%;">
										<div
											style="width:65%;height:100%;float:left;text-align: left;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
											<span v-text="xyText(site.departmentName)" class="infoY-span">科室</span>
										</div>
										<div
											style="width:35%;height:100%;float:left;text-align: right;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
											<span v-text="site.sickbedNo" class="infoY-span">床号</span>
										</div>
									</div>

								</div>
								<!-- 横向任务显示 -->
								<div v-if="site.typeNo=='1'" style="width: 100%;height: 75%;padding: 0.15rem">
									<div
										style="text-align: center;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										<span v-text="site.requiredRoom" class="startX-span"
											:style="[{'color': statusColor(site.typeNo,site.stateNo)}]">OR10</span>
									</div>

								</div>
								<div
									style="width: 100%;height: 25%;border-top:#757B8C solid 0.02rem;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
									<div style="height: 100%;width: 50%;float: left;">
										<div style="float: left;width: 20%;margin-top: 8%;margin-left:10%;">
											<img src="images/left-p.png" class="left_icon">
										</div>
										<div
											style="float: left;width: 65%;height: 100%;margin-top: 6%;margin-left: 5%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
											<span v-text="site.receiver" class="card-sapn">芦花</span>
										</div>
									</div>

									<div style="height: 100%;width: 50%;float: right;">
										<div style="float: left;width: 20%;margin-top: 7%;margin-left:12%;">
											<img src="images/right-p.png" class="right_icon">
										</div>
										<div
											style="float: left;width: 55%;height: 100%;margin-top: 6%;margin-left: 5%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
											<span v-text="site.sender" class="card-sapn">张晶的</span>
										</div>
									</div>


								</div>
							</div>
						</div>
					</div>

					<div v-if="runTotal>0"
						style="width: 100%;height: 5%;display:flex;justify-content: center; align-items:center;">
						<div v-for="(number,index) in page" @click="clickPage(number)"
							:style="{'background': pageColor(number)}"
							style="width: 0.3rem;height:  0.3rem;border-radius: 50%;margin-right: 5%;">
							<div style="font-size: 0.2rem;font-family: PingFangSC, PingFang SC;font-weight: 600;text-align: center;color: #FFFFFF;"
								v-text="number">

							</div>
						</div>
					</div>


					<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.2rem;right: 1.1rem;">
						<img @click="toHgStatistic(1)" src="images/switch_page1.png" class="voiceClass" />
					</div>
					<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.2rem;right: 0.4rem;">
						<img v-if="voice" @click="voiceClick" src="images/voiceOn.png" class="voiceClass" />
						<img v-else @click="voiceClick" src="images/voiceOff.png" class="voiceClass" />
					</div>

					<div style="width: 2rem;height: 0.6rem;position: absolute;bottom: 0.15rem;left: 0.4rem;">
						<div class="tuli1"></div>
						<span class="tuli1-span">
							紧急
						</span>
						<div class="tuli2"></div>
						<span class="tuli2-span">
							超时
						</span>

					</div>

				</div>
				<!-- 统计 -->
				<div class="box1" style="height: 9.9rem;padding:0.3rem 0.2rem 0.1rem 0.2rem;"
					v-else-if="switchPage === 1">
					<div style="width: 100%; height: 9rem; margin-top: .3rem;">
						<div ref="barStackRef" style="height: 8.6rem; margin-top: .2rem;"></div>
						<div
							style="height: .4rem; width: 100%; display: flex; align-items: center; justify-content: center;">
							<div v-for="(primary, index) in primarys" :key="index">
								<!-- <div :class="['default-indicator', showDateIndex === index ? 'select-indicator' : '']"
									@click="changeShowDate(index)"></div> -->
								<div class="rw-page-item" :class="{ 'active': showDateIndex === index }"
									@click="changeShowDate(index)">{{index + 1}}</div>

							</div>
						</div>
					</div>
					<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.2rem;right: 1.8rem;">
						<img @click="toHgStatistic(0)" src="images/switch_page2.png" class="voiceClass" />
					</div>
					<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.2rem;right: 1.1rem;">
						<img v-if="hospitalNo === 'HSXY'" @click="toHgStatistic(0)" src="images/switch_page1.png"
							class="voiceClass" />
						<img v-else @click="toHgStatistic(2)" src="images/switch_page1.png" class="voiceClass" />
					</div>

				</div>
				<!-- 走错房间告警 -->
				<div class="box1" style="height: 9.9rem;padding:0.3rem 0.2rem 0.1rem 0.2rem;"
					v-else-if="switchPage === 2">
					<img src="images/icon-warn-title.png" style="width: 1.4rem; display: block; margin:auto;" />
					<div v-if="roomWarnList.length === 0 " style="width: 100%;height: 89%;position: relative;">
						<div style="width: 3.5rem;height:3.5rem;position: absolute;left:5.2rem;top:1.7rem;">
							<img src="images/noOrder.png" class="noOrder-img">
						</div>
						<div
							style="width: 4rem;height:1rem;position: absolute;left:4.95rem;top:5.4rem;text-align: center;">
							<span
								style="font-family: PingFangSC, PingFang SC;font-weight: 400;color: #94989E;font-size: 0.25rem;letter-spacing: 0.02rem;">暂无告警信息</span>
						</div>
					</div>
					<div v-else class="room-warn-box">
						<div v-for="(item, index) in roomWarbPageList" :key="index" class="room-warn-item">
							<img src="images/icon-msg.png"
								style="position: absolute; top: 0.36rem; left: 0.2rem; width: 0.28rem; height: 0.28rem;" />
							<div class="rw-text1">当前绑定人：{{item.userName}}</div>
							<div class="rw-text2">
								患者标签{{item.labelNo}}<br />
								于{{item.time}}进入{{item.position}}区域，请及时查看！
							</div>

						</div>
					</div>

					<div class="rw-page-box">
						<div v-for="(item, index) in rwPageCount" :key="index" class="rw-page-item"
							@click="changeRWPage(index)" :class="{ 'active': currentPage === index }">
							{{index + 1}}
						</div>
					</div>


					<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.2rem;right: 1.8rem;">
						<img @click="toHgStatistic(1)" src="images/switch_page2.png" class="voiceClass" />
					</div>
					<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.2rem;right: 1.1rem;">
						<img @click="toHgStatistic(0)" src="images/switch_page1.png" class="voiceClass" />
					</div>
				</div>
			</li>
			<!-- 右 -->
			<li class="li3">
				<!-- 右上 -->
				<div class="box4" style="height:9.9rem;padding:0.3rem 0.2rem 0.1rem 0.2rem">
					<div style="width: 100%;height: 5%;padding:0.05rem 0;">
						<div style="width: 60%;position: relative;float: left;text-align: right;">
							<img src="images/waitOrder.png" class="image_taskwait">
						</div>
						<div style="width: 40%;position: relative;float: left;text-align: left;">
							<span class="runCount-sapn">（{{waitTotal}}个）</span>
						</div>

					</div>


					<div v-if="waitTotal==0" style="width: 100%;height: 89%;position: relative;">
						<div style="width: 2.5rem;height:2.5rem;position: absolute;left:0.7rem;top:1.7rem;">
							<img src="images/noOrder.png" class="noOrder-img1">
						</div>
						<div
							style="width: 2.5rem;height:1rem;position: absolute;left:0.8rem;top:4.2rem;text-align: center;">
							<span
								style="font-family: PingFangSC, PingFang SC;font-weight: 400;color: #94989E;font-size: 0.25rem;letter-spacing: 0.02rem;">暂无待接单任务</span>
						</div>
					</div>

					<div v-if="waitTotal>0" id="gun"
						style="width: 100%;height: 8.9rem;padding:0 5%;margin-top: 3%; overflow:hidden;">

						<div class="son-gun" v-for="(site,index) in taskWaitList"
							style="width: 100%;color:#26D4FF;border-bottom: #757B8C solid 0.02rem;">
							<div style="width: 100%;height: 0.46rem;margin-top:0.05rem">
								<div style="width: 50%;height: 100%;text-align: left;float: left;">
									<span v-text="site.taskName" class="right-span-name"
										:style="[{'color': statusColor(site.typeNo,site.stateNo)}]">送病人</span>
								</div>

								<div class="marquee"
									style="width: 50%;height: 100%;text-align: right;float: left;top:0.05rem">

									<span v-bind:class="[getAfterDash(site.point).length>6?'marquee-span': '']"
										v-text="getAfterDash(site.point)" class="right-span-min"
										:style="[{'color': statusColor(site.typeNo,site.stateNo)}]"
										style="font-size: 0.3rem;">OR04-病区</span>

									<!-- <span v-text="getAfterDash(site.point)" class="right-span-min"
										:style="[{'color': statusColor(site.typeNo,site.stateNo)}]"
										style="font-size: 0.3rem;">OR04-病区</span>  -->
								</div>

							</div>
							<div style="width: 100%;height: 0.44rem;text-align: left;position: relative;">
								<span v-text="site.stateName" class="right-span-point" style="color:#00F3FF">待接单</span>

							</div>

							<div v-show="site.HSXYTypeNo!='1'"
								style="width: 100%;height: 1.1rem;padding: 0.12rem 0.15rem;text-align: left;position: relative;background-color: #293444;border-radius: 10px 10px 10px 10px;border: 1px solid #757B8C;">
								<div style="width: 100%;height: 50%;">
									<div
										style="width:50%;height:100%;float:left;text-align: left;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										<span v-text="site.patientName" class="infoY-span">患者姓名</span>
									</div>
									<div
										style="width:50%;height:100%;float:left;text-align: right;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										<span v-text="site.inpatientNumber" class="infoY-span">住院号</span>
									</div>

								</div>
								<div style="width: 100%;height: 50%;">
									<div
										style="width:50%;height:100%;float:left;text-align: left;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										<span v-text="site.departmentName" class="infoY-span">科室</span>
									</div>
									<div
										style="width:50%;height:100%;float:left;text-align: right;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										<span v-text="site.sickbedNo" class="infoY-span">床号</span>
									</div>
								</div>
							</div>
							<div style="margin-top: 0.18rem;"></div>
						</div>
					</div>


				</div>
			</li>
		</ul>
	</div>
	<script>

	</script>

	<script type="text/javascript">

		new Vue({
			el: '#app',
			data: function () {
				return {
					hospitalSwitch: '005',//医院地图接口选择 /医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭

					isHide: this.getQueryString("isHide") != null ? this.getQueryString('isHide') : "0", //是否隐藏医生名字
					nowTime: '',

					date: "",
					time: "",
					week: "",
					page: 1, //页码数量
					pageNow: 1, //进行当前页码

					// taskRunList: [], //进行列表
					taskRunList: [], //进行列表
					taskWaitList: [],  //等待列表
					runTotal: 0,  //进行总数
					waitTotal: 0, //等待总数

					runYCount: 0,//纵向进行中数量
					runXCount: 0,//横向进行中数量

					finishTotal: 0, //今日已完成数量
					wsTimeOutCounter: 0,


					minFontSize: 12,
					maxFontSize: 24,

					/* httpUrl: "http://10.63.2.11:80",
					jktPath: "ws://10.63.2.11:80/oriot_op/websocket/task", */

					/* httpUrl: "http://172.19.44.5",
					jktPath: "ws://172.19.44.5:80/oriot_op/websocket/task",

 */
					/* httpUrl:"http://121.37.233.118:82",
					jktPath:"ws://121.37.233.118:82/oriot_op/websocket/task", */

					//httpUrl: "http://192.168.123.2:82",
					//jktPath: "ws://192.168.123.2:82/oriot_op/websocket/task",


					/* httpUrl: "http://172.29.1.16",
					jktPath: "ws://172.29.1.16/oriot_op/websocket/task", */

					httpUrl: "http://222.71.175.10:1111",
					jktPath: "ws://10.63.2.11/oriot_op/websocket/task",

					//httpUrl:"http://192.168.1.191:82",
					//jktPath:"ws://192.168.1.191:82/oriot_op/websocket/task",

					/* httpUrl: "http://192.1",
					jktPath: "ws://172.29.1.16:82/oriot_op/websocket/task", */


					audio: null,
					voice: false,
					lastInfo: "",
					sickregionNo: this.getQueryString("sickregionNo") != null ? this.getQueryString('sickregionNo') : "none", //是否病区筛选
					surgicalNumber: this.getQueryString("surgicalNumber") != null ? this.getQueryString('surgicalNumber') : "001",

					taskType: this.getQueryString("taskType") != null ? this.getQueryString('taskType') : "All",


					hospitalNo: 'SZC', // 医院编码

					// 统计
					switchPage: 0, // 切换页面 0任务  1统计  2走错房间告警
					switchPageTimes: 0,  // 页面切换时间
					pageShowCount: 8, // 一页展示数量
					primarys: [], // 主任务数量
					secondarys: [], // 辅助任务数量
					names: [], // 护工姓名列表
					showDateIndex: 0,
					autoSwitchBarStackInterval: null, // 用于存储定时器ID

					// 告警短信全部数据
					roomWarnList: [],
					currentPage: 0, // 当前展示页码
					intervalId: null, // 定时器

				}
			},
			computed: {
				rwPageCount() {
					return Math.ceil(this.roomWarnList.length / 9);
				},
				// 告警短信分页数据
				roomWarbPageList() {
					const startIndex = this.currentPage * 9;
					const endIndex = startIndex + 9;
					return this.roomWarnList.slice(startIndex, endIndex);
				}
			},

			mounted() {
				this.setNowTimes();
				setInterval(() => {
					this.setNowTimes();
					this.getPendingOrder();
				}, 60000)

				this.getOngoingTask();
				this.getPendingOrder();
				this.getFinishOrder();


				this.initWebSocket();
				setInterval(() => {
					this.websocketHeartbeat();
				}, 5000)

				this.getHospitalNo();

				setInterval(() => {
					if (this.page > 1) {
						//自动切页  5分钟
						this.pageNow++;
						if (this.pageNow > this.page) {
							this.pageNow = 1;
						}
					}

					this.getOngoingTask();
				}, 120000);



				this.voiceClick()


				// 每两个小时刷新页面
				setInterval(() => {
					location.reload();
				}, 2 * 60 * 60 * 1000);
				/* }, 10 * 1000); */



				// 统计 2m
				setInterval(() => {
					if (this.switchPage === 1) {
						this.getHgOrderCountStatistics();

					}

				}, 2 * 1000 * 60);

				// 告警 5s
				setInterval(() => {
					if (this.switchPage === 2) {
						this.getWarningRoomInfo(this.getCurrentDate());

					}
				}, 5 * 1000);


				// 在组件挂载后，初始化音频
				this.audio = new Audio('mp3/order.mp3');
				this.audio.muted = true; // 设置为静音   

				setTimeout(() => {
					this.barStackUI();
				}, 200);

				this.getHgOrderCountStatistics().then(() => { // 统计
					if (this.isValidNumber(this.switchPageTimes)) {
						this.startPageSwitch();
					};

				});

				this.getWarningRoomInfo(this.getCurrentDate()); // 告警

			},
			beforeDestroy() {
				this.stopRWPageSwitch();
			},

			methods: {



				voiceClick() {
					if (this.voice) {
						this.voice = false;
					} else {
						this.voice = true;
					}

					console.log("voiceclick=============", this.voice);
				},
				//深圳儿童去掉起点
				getAfterDash(str) {
					const index = str.indexOf('-');
					if (index !== -1) {
						return str.slice(index + 1);
					}
					return '';
				},

				//华山西院去掉西院两个字
				xyText(text) {
					return text.replace("西院", "");
				},
				//病人中间加*号
				patientText(text) {
					let originalString = text; // 原始字符串
					let maskedString = originalString[0]; // 保留第一个字符

					// 将第二个字符到倒数第二个字符替换为星号
					for (let i = 1; i < originalString.length - 1; i++) {
						maskedString += "*";
					}

					// 添加最后一个字符
					maskedString += originalString[originalString.length - 1];

					return maskedString; // 输出结果
				},
				getQueryString(name) {
					let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); let r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); }; return null;
				},
				playAudio() {
					// 在用户点击按钮时播放音频
					if (this.audio && this.voice) {
						this.audio.muted = false; // 取消静音
						this.audio.play();
					}
				},
				dynamicFontSize(content) {
					if (typeof content === 'undefined') {
						return;
					}
					// 根据内容长度计算字体大小
					const contentLength = content.length;
					if (contentLength > 5 && contentLength < 7) {
						return '0.35rem';
					} else if (contentLength > 7) {
						return '0.3rem';
					}
				},

				dynamicHeight(content) {
					if (typeof content === 'undefined') {
						return;
					}
					// 根据内容长度计算字体大小
					const contentLength = content.length;
					if (contentLength > 5 && contentLength < 7) {
						return '0.55rem';
					} else if (contentLength > 7) {
						return '0.55rem';
					}
				},

				dynamicFontSize1(content) {
					if (typeof content === 'undefined') {
						return;
					}
					// 根据内容长度计算字体大小
					const contentLength = content.length;
					if (contentLength > 5) {
						return '0.4rem';
					}
				},
				scrollToLocation() {
					let self = this;
					var mainContainer = $('#gun'),
						scrollToContainer = mainContainer.find('.son-gun:last'); //滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
					//动画效果
					mainContainer.animate({
						scrollTop: mainContainer.find('.son-gun:last').offset().top - mainContainer.offset().top + mainContainer.scrollTop()

					}, 3000, function () {

						if (self.taskWaitList.length > 4) {
							mainContainer.find(".son-gun:first").appendTo(mainContainer);
							self.scrollToLocation();
						}
					});	 //2秒滑动到指定位置	
				},

				pageColor(number) {
					if (number == this.pageNow) {
						return "linear-gradient(90deg, #007CD3 0%, #3BC7CF 100%, #3BC8CF 100%, #3AC9CE 100%)";
					} else {
						return "#757B8C";
					}
				},

				clickPage(number) {
					this.pageNow = number;
					this.getOngoingTask();
				},

				statusColor(status, no) {  //横纵 ， 状态
					if (no == "1") {
						return "#D32056";
					} else if (no == "2") {
						return "#FF9000";
					} else {
						return "#fff";
					}

				},

				statusColorBorder(status, no) {  //横纵 ， 状态
					if (no == "1") {
						return "#D32056  solid 1px";
					} else if (no == "2") {
						return "#FF9000 solid 1px";
					} else if (status == "2") {
						return "#06B2B5 solid 1px";
					} else if (status == "1") {
						return "#027F02 solid 1px";
					}
				},

				statusbBgColor(status) {
					if (status == "1") {
						return "rgba(255, 84, 139, 0.15)";
					} else if (status == "2") {
						return "rgba(255, 181, 69, 0.15)";
					} else {
						return "#3C4254";
					}
				},

				statusbFontColor(status) {
					if (status == "1") {
						return "#FA2256";
					} else if (status == "2") {
						return "#FFB545";
					} else {
						return "#FFFFFF";
					}
				},

				statusColorRight(status) {
					if (status == "1") {
						return "#E5E6ED";
					} else if (status == "2") {
						return "#26D4FF";
					}
				},

				//获取时间
				setNowTimes() {
					let myDate = new Date()
					let wk = myDate.getDay()
					let yy = String(myDate.getFullYear())
					let mm = myDate.getMonth() + 1
					let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
					let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
					let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
					let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
					let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
					let week = weeks[wk]
					this.date = yy + '-' + mm + '-' + dd;
					this.time = hou + ':' + min;
					this.week = week;
				},

				// 获取当前日期 yyyy-MM-dd
				getCurrentDate() {
					const today = new Date();
					const year = today.getFullYear();
					const month = (today.getMonth() + 1).toString().padStart(2, '0');
					const day = today.getDate().toString().padStart(2, '0');

					return `${year}-${month}-${day}`;
				},

				//获取进行中任务
				getOngoingTask() {
					const url = this.httpUrl + '/oriot_op/api/dailyTaskListPlanC/getOngoingTask?page=' + this.pageNow + '&sickregionNo=' + this.sickregionNo + '&isHide=' + this.isHide + '&surgicalNumber=' + this.surgicalNumber + '&taskType=' + this.taskType;
					axios.get(url).then(response => {
						if (response.data) {
							if (response.data.code == '1') {
								this.taskRunList = response.data.data;
								if (this.taskRunList.length == 0 && this.pageNow != 1) {
									this.pageNow = 1;
									this.getOngoingTask()
								} else {
									let total = response.data.totalCount;
									this.runTotal = total;

									this.runYCount = response.data.transportCount;
									this.runXCount = response.data.intraoperativeCount;
									let page = 1;
									if (total % 15 != 0) {
										page = Math.floor(total / 15 + 1);
									} else {
										page = Number(total / 15);
									}
									this.page = page;
								}
							}
						}
					}).catch(err => {
						console.log(err)
						console.log('获取进行中任务请求失败')

					})
				},
				//获取等待任务
				getPendingOrder() {
					let self = this;
					const url = this.httpUrl + '/oriot_op/api/dailyTaskListPlanC/getPendingOrder?sickregionNo=' + this.sickregionNo + '&surgicalNumber=' + this.surgicalNumber + '&taskType=' + this.taskType;
					axios.get(url).then(response => {
						if (response.data) {
							if (response.data.code == '1') {
								this.taskWaitList = response.data.data;
								this.waitTotal = response.data.totalCount;
								console.log(this.taskWaitList.length);
								if (this.taskWaitList.length > 4) {

									setTimeout(function () {
										self.scrollToLocation();
									}, 2000);
								}

							}
						}
					}).catch(err => {
						console.log(err)
						console.log('获取进行中任务请求失败')

					})
				},

				//获取已完成数量
				getFinishOrder() {
					const url = this.httpUrl + '/oriot_op/api/dailyTaskListPlanC/getDataTime?sickregionNo=' + this.sickregionNo + '&surgicalNumber=' + this.surgicalNumber + '&taskType=' + this.taskType;
					axios.get(url).then(response => {
						if (response.data) {
							if (response.data.code == '1') {
								this.finishTotal = response.data.total;
							}
						}
					}).catch(err => {
						console.log('获取进行中任务请求失败')

					})
				},

				// 初始化weosocket
				initWebSocket() {

					if (typeof (WebSocket) === 'undefined') {
						alert('您的浏览器不支持websocket')
					} else {
						console.log("initWebSocket")
						this.jktSocket = new WebSocket(this.jktPath)
						this.jktSocket.onmessage = this.websocketonmessage
						this.jktSocket.onopen = this.websocketonopen
						this.jktSocket.onerror = this.websocketonerror
						this.jktSocket.onclose = this.websocketclose
					}

				},
				websocketonopen() {
					// 连接建立之后执行send方法发送数据
					let actions = {
						test: 'test'
					}
					this.websocketsend(JSON.stringify(actions))
				},
				websocketonerror() {
					// 连接建立失败重连
					console.log('websocket连接失败');
				},
				websocketonmessage(e) {
					const redataWs = e.data;
					this.wsTimeOutCounter = 0;
					console.log(redataWs);
					if (redataWs == 'task11') {
						if (this.wsTimeOutCounter > 0) {
							this.wsTimeOutCounter--;
						}
						return;
					}

					if (this.lastInfo == redataWs) {
						return;
					}
					this.lastInfo = redataWs;
					let list = redataWs.split(",");
					if (list.length > 0) {
						let no = list[0];
						let orderNo = list[1];

						if (no == '1') { //新发布任务
							this.playAudio();
							this.getOngoingTask();
							this.getPendingOrder();
						} else if (no == '2') { //护工抢单  任务取消
							this.getOngoingTask();
							this.getPendingOrder();
						} else if (no == '4') { //完成订单
							this.getOngoingTask();
							this.getPendingOrder();
							this.getFinishOrder();
						} else if (no == '9') { //确认
							this.getPendingOrder();
						}

					}

				},
				websocketsend(Data) {
					// 数据发送
					this.jktSocket.send(Data)
				},
				websocketclose(e) {
					// 关闭
					console.log('断开连接', e)
					this.jktSocket.close();

				},
				sendRoomWebsocketMsg(msg) {
					var data = JSON.stringify(msg);
					if (this.jktSocket != null) {
						console.log("globalRoomWebsocket.send:" + msg);
						this.jktSocket.send(data);
					}
				},
				websocketHeartbeat() {
					this.sendRoomWebsocketMsg("task00");
					this.wsTimeOutCounter++;
					if (this.wsTimeOutCounter > 10) {
						//websocket link down，then reset websocket
						this.initWebSocket();
						this.wsTimeOutCounter = 0;
					}
				},

				//获取医院编码
				getHospitalNo() {
					const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getHospitalCode';
					axios.get(url).then(response => {
						if (response.data) {
							if (response.data.code == '1') {
								this.hospitalNo = response.data.hospitalCode

							}
						}
					}).catch(err => {
						console.log('获取手术信息请求失败')

					})
				},

				// 统计
				getHgOrderCountStatistics() {
					return new Promise((resolve, reject) => {
						const url = this.httpUrl +
							'/oriot_op/api/comprehensiveSituationMap/hgOrderCountStatistics?surgicalNumber=' + this.surgicalNumber;
						let self = this;
						const requestData = {
							splitCount: this.pageShowCount,	// 一次性展示个数 不传或传0 默认10
							isHide: 0,						// 是否隐藏姓名 0否1是 不传默认1
							orderBy: "DESC",				// 返回结果升降序 不传默认DESC
							isFull: 0,						// 最后一页数量不足时是否补齐--0否1是  不传默认1
							filterName: ["术源测试", "测试护工"],		// 不展示人员列表
						};
						$.ajax({
							url,
							type: 'post',
							dataType: 'json',
							data: JSON.stringify(requestData),
							cache: false,
							processData: false,
							contentType: false,
							// contentType: 'application/json',
							success(res) {
								console.log("+++++ 护工任务完成数量统计接口 请求成功++++++++");
								console.log(res.data);

								if (res.code == '1') {

									self.primarys = res.data.primarys;
									self.secondarys = res.data.secondarys;
									self.names = res.data.names;

									if (res.data.switchPageTimes && self.isValidNumber(res.data.switchPageTimes)) {
										self.switchPageTimes = parseInt(res.data.switchPageTimes, 10);

									}

									// self.barStackUI();
									// self.startAutoSwitchBarStack();

									resolve();

								} else {
									reject();
								}

							},
							error(err) {
								console.log('护工任务完成数量统计接口 请求失败')
								reject();

							},

						})
					})
						.finally(() => {
							this.barStackUI();
							this.startAutoSwitchBarStack();
						});
				},



				async barStackUI() {

					// 计算根字体大小
					function setFontSize() {
						var whei = $(window).width();
						$("html").css({
							fontSize: whei / 20 // 设置根字体大小
						});
						return whei / 20; // 返回根字体大小
					}

					var rootFontSize = setFontSize(); // 初始计算字体大小

					$(window).resize(function () {
						rootFontSize = setFontSize(); // 当窗口尺寸变化时重新计算根字体大小
					})

					await this.$nextTick();
					const chartContainer = this.$refs.barStackRef;

					if (!chartContainer) {
						return;
					}

					if (this.echartsInstance1) {
						this.echartsInstance1.dispose();
					}

					this.echartsInstance1 = echarts.init(chartContainer);

					// 检查数据是否为空
					if (
						!this.primarys[this.showDateIndex] ||
						!this.secondarys[this.showDateIndex] ||
						!this.names[this.showDateIndex]
					) {
						// 数据为空，显示提示信息
						this.echartsInstance1.showLoading({
							text: '暂无数据',
							color: '#e8d8d7',
							textColor: '#dfd6d6',
							maskColor: 'transparent',
							zlevel: 0,
						});
						return;
					}

					this.echartsInstance1.showLoading({
						text: '加载中',
						color: '#e8d8d7',
						textColor: '#dfd6d6',
						maskColor: 'transparent',
						zlevel: 0,
					}); // 显示


					this.echartsInstance1.clear();
					this.echartsInstance1.hideLoading(); // 隐藏

					this.echartsInstance1.setOption({
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: function (params) {
								let total = 0;
								params.forEach(param => {
									total += param.value;
								});
								return [
									params[0].name + '<br/>',
									params[0].seriesName + ': ' + params[0].value + '<br/>',
									params[1].seriesName + ': ' + params[1].value + '<br/>',
									'总和: ' + total
								].join('');
							}
						},
						legend: {
							data: ['主导任务数量', '辅助任务数量'],
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: rootFontSize * 0.2,
							},
						},
						grid: {
							top: '8%',
							left: '5%',
							right: '5%',
							bottom: '5%',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							name: '人名',
							data: this.names[this.showDateIndex],
							axisLabel: {
								color: '#B0B8CD',
								fontSize: rootFontSize * 0.2,
							},
							axisTick: { // 坐标轴刻度线
								show: false,
							},
						}],
						yAxis: [{
							type: 'value',
							name: '任务数量(个)',
							axisLabel: {
								color: '#B0B8CD',
								fontSize: rootFontSize * 0.2,
							},
							splitLine: { // 网格线
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
						}],
						series: [
							{
								name: '辅助任务数量',
								type: 'bar',
								stack: 'Ad',
								barMaxWidth: "80",
								label: {
									show: true,
									position: 'inside',
									formatter: (params) => {
										return params.value > 0 ? `${params.value}(辅)` : '';
									},
									color: '#fff',
									fontSize: rootFontSize * 0.21,
								},
								itemStyle: {
									color: '#017DD3',

								},
								data: this.secondarys[this.showDateIndex],

							},
							{
								name: '主导任务数量',
								type: 'bar',
								stack: 'Ad',
								barMaxWidth: "80",
								label: {
									show: true,
									position: 'inside',
									formatter: (params) => {
										return params.value > 0 ? `${params.value}(主)` : '';
									},
									color: '#fff',
									fontSize: rootFontSize * 0.21,
								},
								itemStyle: {
									color: '#06B2B5',
								},
								data: this.primarys[this.showDateIndex],
							},
							{
								name: '总和',
								type: 'bar',
								stack: 'Ad',
								barMaxHeight: 0,
								barMaxWidth: "80",
								label: {
									show: true,
									position: 'top',
									formatter: (params) => {
										const total = this.primarys[this.showDateIndex][params
											.dataIndex
										] + this.secondarys[this.showDateIndex][params
											.dataIndex
											];
										return total;
									},
									color: '#fff',
									fontSize: rootFontSize * 0.24,
									fontWeight: 'bold',

								},
								data: this.primarys[this.showDateIndex].map((_, index) => 0),
							}

						]

					});

					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								this.echartsInstance1.resize()
							}, 200)
						},
						false,
					);
					this.echartsInstance1.hideLoading();

				},

				changeShowDate(index) { // 点击切换展示数据
					this.showDateIndex = index;
					this.barStackUI();
				},
				// 定时切换展示数据
				startAutoSwitchBarStack() {
					if (this.autoSwitchBarStackInterval) clearInterval(this.autoSwitchBarStackInterval);

					this.autoSwitchBarStackInterval = setInterval(() => {
						// 每十秒切换一次
						this.showDateIndex = (this.showDateIndex + 1) % this.primarys.length;
						this.barStackUI();
					}, 10000);
				},

				// 停止自动切换
				stopAutoSwitchBarStack() {
					if (this.autoSwitchBarStackInterval) clearInterval(this.autoSwitchBarStackInterval);
				},

				// 判断是否是有效的数字或字符串数字 且大于0
				isValidNumber(value) {
					let numberValue = Number(value);
					return !isNaN(numberValue) && numberValue > 0;
				},

				changeRWPage(index) {
					this.currentPage = index;

				},

				// 跳转查看
				toHgStatistic(page) {
					this.switchPage = page;
					if (this.switchPage === 1) {
						setTimeout(() => {
							this.barStackUI();
						}, 200);
						this.getHgOrderCountStatistics();

					} else {
						if (this.switchPage === 2) {
							this.getWarningRoomInfo(this.getCurrentDate());
						}
						this.echartsInstance1.dispose();
					}

				},
				// 页面切换
				startPageSwitch() {
					let totalPage = this.hospitalNo === 'HSXY' ? 2 : 3
					setInterval(() => {
						let toPage = (this.switchPage + 1) % totalPage;
						this.toHgStatistic(toPage);
					}, this.switchPageTimes);
				},


				// 获取告警信息
				getWarningRoomInfo(date) {
					console.log("获取告警信息---");
					const url = this.httpUrl + `/oriot_op/api/comprehensiveSituationMap/getWarningRoomInfo`;
					let self = this;
					const param = {
						date: date,
					};
					const queryString = Object.keys(param)
						.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(param[key])}`)
						.join('&');
					const fullUrl = `${url}?${queryString}`;

					$.ajax({
						url: fullUrl,
						type: 'get',
						success(res) {
							console.log("+++++获取告警信息接口 请求成功++++++++");
							console.log(res);
							if (res.code === '1') {
								self.parseData(res.data);
							}
						},
						error(e) {
							console.log('获取告警信息接口 请求失败:', e)
						},
					})
				},
				parseData(data) {
					this.roomWarnList = [];
					data.forEach((item) => {
						const regex = /患者：(.*?) - 标签：(.*?) - 于 (.*?)进入 (.*?) 区域，请注意查看!/g;
						let match;
						while ((match = regex.exec(item))) {
							this.roomWarnList.push({
								userName: match[1],
								labelNo: match[2],
								time: match[3],
								position: match[4]
							});
						}
					});
				},

				// 标签告警展示页切换
				startRWPageSwitch() {
					this.intervalId = setInterval(() => {
						this.currentPage = (this.currentPage + 1) % this.rwPageCount;
					}, 5000);
				},
				stopRWPageSwitch() {
					if (this.intervalId) {
						clearInterval(this.intervalId);
						this.intervalId = null;
					}
				},

			},

		})
	</script>

	<style type="text/css">
		.default-indicator {
			box-sizing: border-box;
			width: 0.11rem;
			height: .11rem;
			margin: 0.11rem;
			border-radius: 50%;
			background-color: aliceblue;
		}

		.select-indicator {
			box-sizing: border-box;
			background: linear-gradient(90deg, #007CD3 0%, #3BC7CF 100%, #3BC8CF 100%, #3AC9CE 100%);
		}

		.room-warn-box {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			margin-top: 0.29rem;
		}

		.room-warn-item {
			height: 2.5rem;
			background: #282C38;
			border-radius: 0.1rem;
			border: 1px solid #06B2B5;
			margin-right: 0.2rem;
			margin-bottom: 0.2rem;
			min-width: calc((100% - 0.4rem) / 3);
			position: relative;

			text-align: left;

		}

		.room-warn-box .room-warn-item:nth-child(3n) {
			margin-right: 0;
		}


		.rw-text1 {
			position: absolute;
			top: 0.31rem;
			left: 0.73rem;
			font-family: Inter, Inter;
			font-weight: bold;
			font-size: 0.33rem;
			max-width: 80%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
			text-transform: none;

		}

		.rw-text2 {
			position: absolute;
			top: 0.88rem;
			left: 0.73rem;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 0.27rem;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
			text-transform: none;
			max-width: 3.7rem;
		}

		.rw-page-box {
			position: absolute;
			display: flex;
			align-items: center;
			bottom: 0.3rem;
			left: 50%;
			transform: translateX(-50%);
			color: #007CD3;
		}

		.rw-page-item {
			width: 0.28rem;
			height: 0.28rem;
			background: #757B8C;
			border-radius: 50%;
			margin: 0 0.17rem;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 0.2rem;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.rw-page-item.active {
			background: linear-gradient(90deg, #007CD3 0%, #3BC7CF 100%, #3BC8CF 100%, #3AC9CE 100%);
		}
	</style>
</body>

</html>